<template>
  <keep-alive>
    <Starrysky />
  </keep-alive>

  <!-- 加载界面 -->
  <RouterLoading v-if="variable.router_loading.value" />

  <div
    v-if="!variable.router_loading.value"
    @click="closeMenu()"
    @contextmenu.prevent="openMenu($event)"
    style="position: relative"
  >
    <div class="main">
      <!-- 顶部导航 -->
      <div
        class="nav"
        :style="{ backgroundColor: variable.navBackground.value }"
      >
        <keep-alive>
          <Navbar />
        </keep-alive>
      </div>

      <!-- 中心 -->
      <router-view> </router-view>

      <!-- 右击菜单 -->
      <keep-alive>
        <RightMenu />
      </keep-alive>
    </div>

    <keep-alive>
      <Yejiao />
    </keep-alive>
  </div>
</template>

<script setup>
import RouterLoading from "../RouterLoading.vue";
import Starrysky from "../Starrysky.vue";
import variable from "../../js/variable";
import Navbar from "./Navbar.vue";
import WelcomeLog from "../WelcomeLoading.vue";

const RightMenu = defineAsyncComponent(() => import("./RightMenu.vue"));
const Yejiao = defineAsyncComponent(() => import("./Yejiao.vue"));
const axios = inject("axios");
const route = useRoute();

onMounted(() => {
  //首次进入欢迎弹窗
  if (!localStorage.getItem("adublogHY")) {
    axios
      .get("https://api.vvhan.com/api/visitor.info")

      .then((response) => {
        const data = response.data;
        if (data.success) {
          ElNotification({
            icon: WelcomeLog,
            title: "你好",
            dangerouslyUseHTMLString: true,
            message:
              "欢迎来自" +
              data.location +
              "的小伙伴<br/><a>" +
              data.system +
              " " +
              data.browser +
              "</a>",
            showClose: false,
            offset: 80,
            duration: 2500,
          });
          localStorage.setItem("adublogHY", true);
        }
      })
      .catch();
  }

  //粒子
  async (engine) => {
    await loadSlim(engine);
  };
});

// 实时监听窗口大小
onMounted(() => {
  window.addEventListener("resize", () => {
    variable.windowWidth.value = window.innerWidth;
  });
});
onUnmounted(() => {
  window.removeEventListener("resize", () => {
    variable.windowWidth.value = window.innerWidth;
  });
});

//打开右击菜单
function openMenu(e) {
  //阻止默认右键事件
  e.preventDefault();
  //阻止冒泡
  e.stopPropagation();

  // 获取鼠标点击的坐标
  const x = e.clientX;
  const y = e.clientY;

  // 考虑页面滚动
  const scrollX = window.pageXOffset;
  const scrollY = window.pageYOffset;

  // 计算菜单应该出现的位置
  variable.yjLeft.value = x + scrollX + 10;

  if (route.name != "Article") {
    variable.yjTop.value = y + scrollY - 70;
  } else {
    variable.yjTop.value = y + scrollY;
  }

  //显示
  variable.visible.value = true;

  // 获取当前选中的文本
  const selection = window.getSelection();
  const selectedText = selection.toString();
  if (selectedText.trim() != "") {
    variable.selectedText.value = selectedText.trim();
  } else {
    variable.selectedText.value = null;
  }
  // 获取当前选中的文本 end

  //将右击地方处的事件储存起来【用于粘贴】
  variable.jycsdz.value = e;
}

// 全局点击关闭
function closeMenu() {
  variable.visible.value = false; //关闭右击菜单
  variable.musicListState.value = false; //关闭歌单列表
  variable.bgState.value = false; //关闭表情
}
</script>

<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>